<template>
  <div class="home">
    <div id="nav" :style="{opacity}">导航</div>
    <img alt="Vue logo" src="../assets/logo.png">
    <p>
      <button @click="add">count++:{{count}}</button>
    </p>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      count:0,
      opacity:0
    }
  },
  methods: {
    add(){
      this.count++
    },
    handleSroll(){
      var scrollTop = window.scrollY;
      console.log(scrollTop);
      var opacity = scrollTop/200;
      if(opacity>1){
        opacity = 1;
      }
      this.opacity = opacity;
    }
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
    window.addEventListener("scroll",this.handleSroll)
  },
  beforeUpdate() {
    console.log("beforeUpdate");
    console.log(this.count);
    
  },
  updated() {
    console.log("updated");
    // debugger
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
    window.removeEventListener("scroll",this.handleSroll)
  },
}
</script>
<style scoped>
#nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: red;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.home{
  height: 3000px;
}
</style>
